<template>
  <div id="app">
<!--    <h1>{{ str }} {{ arr }}</h1>-->
<!--    <h2 v-bind:title="titleStr">222</h2>-->
<!--    <h2 :title="titleStr">222</h2>-->
<!--    <ul v-if="arr.length">-->
<!--      <li v-for ='(item,index) in arr' :key="index">{{item}} {{index}}</li>-->
<!--    </ul>-->
<!--    <h1 v-else>暂无数据</h1>-->
<!--    {{ list }}-->
<!--    <ul>-->
<!--      <li v-for="item in list" :key="item.id">{{item.name}}</li>-->
<!--    </ul>-->

<!--    <h1 v-if='types=="张三"'>111</h1>-->
<!--    <h1 v-else-if='types=="李四"'>222</h1>-->
<!--    <h1 v-else>333</h1>-->

<!--    <ul v-if='list.length'>-->
<!--      <li v-for="(item,index) in list" :key="index">-->
<!--        {{item}}-->
<!--        <button @click="deletes(index)">删除</button>-->
<!--      </li>-->
<!--    </ul>-->
<!--    <h1 v-else>暂无数据...</h1>-->

<!--    <div class="main" v-show="isShow">-->
<!--    </div>-->

<!--    <button  @click="btnFn()">隐藏</button>-->

<!--    <input type="" name="" v-model=inputVal>-->
<!--    {{inputVal}}-->
<!--    <input type="checkbox" value="张三" v-model="checkedNames">-->
<!--    <input type="checkbox" value="李四" v-model="checkedNames">-->
<!--    <input type="checkbox" value="王五" v-model="checkedNames">-->
<!--    <h1>复选框:{{ checkedNames }}</h1>-->

<!--    <input type="radio" value="张三" v-model="checkedNames">-->
<!--    <input type="radio" value="李四" v-model="checkedNames">-->
<!--    <input type="radio" value="王五" v-model="checkedNames">-->
<!--    <h1>复选框:{{ checkedNames }}</h1>-->

<!--{{str.split('').reverse().join('') }}-->
<!--    {{changeStr}}-->
<!--    单价-->
<!--    <input type="" name="" v-model="price">-->
<!--    数量-->
<!--    <input type="" name="" v-model="num">-->
<!--    总价{{total}}-->
<!--        总价{{totalCount()}}-->
<!--    <ul>-->
<!--&lt;!&ndash;      <li v-for="(item,index) in list" :key="index" :class='{active:true}'>&ndash;&gt;-->
<!--&lt;!&ndash;      <li v-for="(item,index) in list" :key="index" :class='{active:false,on:true}'>&ndash;&gt;-->
<!--      <li v-for="(item,index) in list" :key="index" :class='currentClass == index?"active":""' @click="btn(index)">-->
<!--      {{item}}-->
<!--      </li>-->
<!--    </ul>-->
<!--    <div :class="[activeClass]" >-->
<!--      aaa-->
<!--    </div>-->
<!--    <div :style='styleClass' >-->
<!--      aaa-->
<!--    </div>-->
<!--    <img src="./assets/logo.png">-->
    <img :src="imgUrl">
      <ul>
        <li v-for="(item,index) in imagArr" :key="index">
          <img :src="item">
        </li>
      </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      // imagArr:['./assets/logo.png','./assets/logo.png'],
      // imgUrl:'./assets/logo.png',
      imagArr:['./img/logo.png','./img/logo.png'],
      imgUrl:'./img/logo.png',
      list:['a','b','c'],
      price:'11',
      num:2,
      str:'123',
      checkedNames:[],
      inputVal:'123',
      isShow:false,
      // list:[
      //   {
      //     id:1,
      //     name:'张三'
      //   },
      //   {
      //     id:2,
      //     name:'李四'
      //   },
      //   {
      //     id:3,
      //     name:'王五'
      //   }
      // ]
      // str:"123",
      // arr:["a","b","c",'d'],
      // arr:[],
      // titleStr:'这是李四',
      // list:[
      //   {
      //     id:0,
      //     name:'张三'
      //   },
      //   {
      //     id:0,
      //     name:'张三'
      //   },
      //   {
      //     id:0,
      //     name:'张三'
      //   }
      // ],
      // types:'网格'
      currentClass:0,
      activeClass:'active',
      onClass:'on',
      styleClass:{
        background:'blue',
        fontSize:'50px',
        color:"yellow",
        opacity:'1'
      }
    }
  },
  computed:{
    changeStr(){
      return this.str.split('').reverse().join('');
    },
    total(){
      console.log('computed')
      return this.price * this.num
    }
  },
  methods:{
    deletes(index){
      alert(index);
      console.log(this.list)
      this.list.splice(index,1)
    },
    btnFn(){
      this.isShow=!this.isShow
    },
    totalCount(){
      console.log("methods")
      return this.price * this.num;
    },
    btn(index){
      console.log(index)
      this.currentClass = index
    }

  }

}
</script>

<style>
.active{
  background: red;
}

#app {
  /*font-family: Avenir, Helvetica, Arial, sans-serif;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*text-align: center;*/
  /*color: #2c3e50;*/
  /*margin-top: 60px;*/
}
.main{
  width: 300px;
  height: 300px;
  background: red;
}

</style>
